<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<div class="box">box标签<!-- 注释内容 --></div>

<script>

var doc = document;// 文档节点
var box = document.querySelector('.box');// 元素节点
var txt = box.firstChild;// 文本节点
var zhushi = box.lastChild;// 注释节点
var attr = box.getAttributeNode('class');// 属性节点

// nodeName属性
// 属性值为节点名称
console.log( box.nodeName );// 'DIV' 元素节点的nodeName返回大写的标签名
console.log( attr.nodeName );// 'class' 属性节点的nodeName返回属性名称
console.log( txt.nodeName );// '#text' 文本节点的nodeName始终返回'#text'
console.log( zhushi.nodeName );// '#comment' 注释节点的nodeName始终返回'#comment'
console.log( doc.nodeName );// '#document' 文档节点的nodeName始终返回'#document'

// tagName属性（元素节点的属性）
console.log( box.tagName );// 'DIV' 元素节点的tagName返回大写的标签名

</script>
</body>
</html>